import React from "react"
import GpContainer from "@/components/GpContainer"
import { Swiper, SwiperItem, Image, ScrollView, Navigator, View } from "@tarojs/components"
import GpPagination from "@/components/GpPagination"
import GpInstitutionItem from "@/components/GpInstitutionItem"
import GpJumpNavs from "@/components/GpJumpNavs"
import GpCurrentPort from "@/components/GpCurrentPort"
import GpTabbar from "@/components/GpTabbar"
import { cloneDeep } from "@/utils/common"
import clsx from "clsx"
import { getRankingInstitution, getRankingPageData } from "@/apis/index"
import GpEmpty from "@/components/GpEmpty"
import Taro from "@tarojs/taro"
import styles from "./index.module.scss"
import { commonUrls } from "@/utils/router"

const ports = [{ text: "机构排名" }]
type IState = {
  pagination: IPagination
  curFilter: number
  /** 榜单推荐 */
  projects: IApiRelative.IGetRankingPageData.IResData["projects"]
  list: IApiRelative.IGetRankingInstitution.IListItem[]
  pending: boolean
}
type IData = {
  filter?: number
  curFilter?: number
}
class TrainGuide extends React.Component<unknown, IState> {
  extData: IData
  constructor(props) {
    super(props)
    this.state = {
      pagination: {
        page: 1,
        pageCount: 1
      },
      curFilter: 0,
      projects: [],
      list: [],
      pending: true
    }
    this.extData = {}
  }
  onLoad(options: Recordable) {
    if (options.filter) {
      this.extData.filter = Number(options.filter)
    }
    this.getPageData().then(() => {
      this.search(1)
    })
  }
  getPageData = () => {
    return getRankingPageData().then(res => {
      if (res.data.success) {
        const projects = res.data.data.projects || []
        const curFilter = this.extData.filter ?? projects[0].value
        this.setState({
          projects,
          curFilter
        })
        this.extData.curFilter = curFilter
      }
    })
  }
  search = (page = 1) => {
    Taro.showLoading()
    const search = {
      project: this.extData.curFilter
    } as IApiRelative.IGetRankingInstitution.IParams["search"]
    getRankingInstitution({
      search,
      pagination: {
        current: page,
        pageSize: 10
      }
    })
      .then(res => {
        if (res.data.success) {
          const retData = res.data.data
          const retList = retData.list || []
          this.setState({
            list: retList,
            pagination: {
              page: retData.pagination.current,
              pageCount: retData.pagination.pageCount
            }
          })
        }
      })
      .finally(() => {
        Taro.hideLoading()
        if (this.state.pending) {
          this.setState({
            pending: false
          })
        }
      })
  }
  /** 轮播 */
  renderSwiper = () => {
    return (
      <View className="pb-8px">
        <Swiper
          className="h-248px"
          indicatorColor="rgba(255, 255, 255, 0.5)"
          indicatorActiveColor="#FFFFFF"
          circular
          indicatorDots
          autoplay
        >
          <SwiperItem>
            <Navigator
              url={commonUrls.examGuide}
              hoverClass="none"
              className="w-690px h-248px rounded-16px bg-hex-ff0 overflow-hidden mx-auto"
            >
              <Image
                src="https://static.91goodschool.com/UpFiles/public/yikao/image/banner_1.png"
                className="w-690px h-248px"
                mode="aspectFill"
              />
            </Navigator>
          </SwiperItem>
          <SwiperItem>
            <Navigator
              url={commonUrls.institution}
              hoverClass="none"
              className="w-690px h-248px rounded-16px bg-hex-ff0 overflow-hidden mx-auto"
              openType="switchTab"
            >
              <Image
                src="https://static.91goodschool.com/UpFiles/public/yikao/image/banner_2.png"
                className="w-690px h-248px"
                mode="aspectFill"
              />
            </Navigator>
          </SwiperItem>
          <SwiperItem>
            <Navigator
              url={commonUrls.news}
              hoverClass="none"
              className="w-690px h-248px rounded-16px bg-hex-ff0 overflow-hidden mx-auto"
            >
              <Image
                src="https://static.91goodschool.com/UpFiles/public/yikao/image/banner_3.png"
                className="w-690px h-248px"
                mode="aspectFill"
              />
            </Navigator>
          </SwiperItem>
        </Swiper>
      </View>
    )
  }
  handlePageChange = (page: number) => {
    const _pagination = cloneDeep(this.state.pagination)
    _pagination.page = page
    this.setState(
      {
        pagination: _pagination
      },
      () => {
        this.search(page)
      }
    )
  }
  /** 列表 */
  renderList = () => {
    const { list } = this.state
    const listLen = list.length
    return (
      <View className="mt-20px bg-hex-fff px-30px">
        <View className="flex flex-col">
          {/* item for loop */}
          {listLen > 0 ? (
            list.map((l, index) => (
              <GpInstitutionItem
                key={l.id}
                pureProps={{ institution: l }}
                ranking={{
                  level: l.ranking,
                  levelText: "TOP" + l.ranking
                }}
                className={clsx({
                  "mb-20px": index !== listLen - 1
                })}
              />
            ))
          ) : (
            <GpEmpty />
          )}
        </View>
      </View>
    )
  }
  handleTabChange = (item: IApiRelative.IOptional<number>) => {
    const { curFilter } = this.state
    if (curFilter !== item.value) {
      this.setState({
        curFilter: item.value
      })
      this.extData.curFilter = item.value
      this.search(1)
    }
  }
  renderTabs = () => {
    const { curFilter, projects } = this.state
    const len = projects.length
    return (
      <View className="h-90px box-border">
        <ScrollView scrollX scrollWithAnimation className="whitespace-nowrap">
          {projects.map((l, index) => (
            <View
              className={clsx(styles["item"], {
                [styles["active"]]: curFilter === l.value,
                [styles["first-child"]]: index === 0,
                [styles["last-child"]]: index === len - 1
              })}
              key={l.value}
              onClick={() => this.handleTabChange(l)}
            >
              {l.label}
              <View className={styles["slider"]}></View>
            </View>
          ))}
        </ScrollView>
      </View>
    )
  }
  /** 快捷导航 */
  renderJumpNavs = () => {
    return (
      <View className="mt-20px">
        <GpJumpNavs />
      </View>
    )
  }
  render(): React.ReactNode {
    const { pagination, pending } = this.state
    if (pending) return null
    return (
      <GpContainer>
        <View>
          {/* 轮播 */}
          <View className="bg-hex-fff pt-20px">
            {this.renderSwiper()}
            {/* tabs */}
            {this.renderTabs()}
          </View>
          {/* 列表 */}
          {this.renderList()}
          {/* 分液器 */}
          <GpPagination
            onChange={this.handlePageChange}
            pagination={pagination}
            className="mt-20px"
          />
          {/* 快捷导航 */}
          {this.renderJumpNavs()}
          {/* 当前位置 */}
          <GpCurrentPort ports={ports} />
        </View>
        {/* 底部导航 */}
        <GpTabbar />
      </GpContainer>
    )
  }
}
export default TrainGuide
